<template>
	<view class="page pp">
		<wd-form ref="form" :model="info">
			<wd-cell-group border>
				<wd-input label="收件人" label-width="100px" prop="username" v-model="info.username" placeholder="请输入用户名"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<wd-input label="联系方式" label-width="100px" prop="phone" v-model="info.phone" placeholder="请输入联系方式"
					:rules="[{ required: true, message: '请输入联系方式' }, {
						required: true,
						validator: validatorPhone,
						message: '请输入正确的手机号'
					  }]" />
				<wd-picker :columns="columns" label-width="100px" placeholder="请选择收货地址" v-if="columns.length"
					label="收货地址" v-model="info.address" :column-change="onChangeDistrict" @confirm="handlePickerConfirm"
					label-key="name" value-key="id" :rules="[{ required: true, message: '请选择收货地址' }]" />
				<wd-textarea v-model="info.detail" label-width="100px" prop="detail" label="详细地址" placeholder="请填写详细地址"
					:rules="[{ required: true, message: '请填写详细地址' }]" />
			</wd-cell-group>
			<view class="footer">
				<wd-button type="primary" size="large" block @click="handleSave">提交</wd-button>
			</view>
		</wd-form>
		<wd-notify />
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import userApi from "@/api/user.js"
	import {
		useNotify
	} from '@/uni_modules/wot-design-uni'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const {
		showNotify,
		closeNotify
	} = useNotify()
	let originTree = uni.getStorageSync("region") || []
	const activeCityIndex = ref(0)
	const activeRegionIndex = ref(0)
	const info = reactive({
		username: "",
		phone: "",
		address: [],
		detail: "",
		id : 0,
		status : "A"
	})
	const form = ref()
	const columns = ref([])
	
	onLoad((e)=>{
		try{
			const detail = JSON.parse(e.info)
			info.username = detail.name
			info.phone = detail.mobile
			info.address = [detail.provinceId,detail.cityId,detail.regionId]
			info.detail = detail.detail
			info.status = detail.status
			info.id= detail.id
		}catch (err){
			
		}
	})
	
	const setColumn = async (columnIndex = -1, activeIndex) => {
		let data = [
			[],
			[],
			[]
		]
		let provices = []
		let city = []
		let region = []
		if (originTree.length == 0) {
			originTree = await getRegion()
		}
		originTree.map((item) => {
			provices.push({
				code: item.code,
				id: item.id,
				level: item.level,
				name: item.name,
			})
		})
		if (columnIndex == -1) { // 表示设置省
			originTree[0].city.map(citem => {
				city.push({
					code: citem.code,
					id: citem.id,
					level: citem.level,
					name: citem.name,
				})
			})

			originTree[0].city[0].region.map(ritem => {
				region.push({
					code: ritem.code,
					id: ritem.id,
					level: ritem.level,
					name: ritem.name,
				})
			})
		}

		if (columnIndex == 0) {
			originTree[activeIndex].city.map(citem => {
				city.push({
					code: citem.code,
					id: citem.id,
					level: citem.level,
					name: citem.name,
				})
			})

			originTree[activeIndex].city[0].region.map(ritem => {
				region.push({
					code: ritem.code,
					id: ritem.id,
					level: ritem.level,
					name: ritem.name,
				})
			})
		}

		if (columnIndex == 1) {

			originTree[activeRegionIndex.value].city.map(citem => {
				city.push({
					code: citem.code,
					id: citem.id,
					level: citem.level,
					name: citem.name,
				})
			})

			originTree[activeRegionIndex.value].city[activeIndex].region.map(ritem => {
				region.push({
					code: ritem.code,
					id: ritem.id,
					level: ritem.level,
					name: ritem.name,
				})
			})
		}

		data = [provices, city, region]
		return data

	}
	const validatorPhone = (phone) => {
		const myreg = /^1[3-9]\d{9}$/;
		return myreg.test(phone)
	}
	const getRegion = async () => {
		const res = await userApi.getAddressTree()
		uni.setStorageSync("region", res.data)
		return res.data
	}

	const init = async () => {
		columns.value = await setColumn()
	}

	init()

	const onChangeDistrict = async (pickerView, value, columnIndex, resolve) => {
		const index = pickerView.getSelectedIndex()[columnIndex]
		const data = await setColumn(columnIndex, index)
		if (columnIndex === 0) {
			activeRegionIndex.value = index
			activeCityIndex.value = 0
			pickerView.setColumnData(1, data[1])
			pickerView.setColumnData(2, data[2])
		}
		if (columnIndex === 1) {
			activeCityIndex.value = index
			pickerView.setColumnData(2, data[2])
		}

		resolve()
	}

	const handlePickerConfirm = (e) => {
		info.address = e.value
	}

	const handleSave = () => {

		form.value.validate().then(res => {
			if (res.valid) {
				const params = {
					"name": info.username,
					"mobile": info.phone,
					"provinceId": info.address[0],
					"cityId": info.address[1],
					"regionId": info.address[2],
					"detail": info.detail,
					"status": info.status,
				}
				if(info.id){
					params.addressId = info.id
				}
				userApi.addressSave(params).then(res =>{
					if(res){
						showNotify({
							type : "success",
							message : "操作成功"
						})
						setTimeout(()=>{
							uni.navigateBack()
						}, 500)
					}
				})
			}
		})
	}
</script>

<style lang="scss">
	.footer {
		margin-top: 80rpx;
	}
</style>